<template>
  <div class="pagss">
    <div style="height: 20px;"></div>
    <Navvz></Navvz>

    <el-row>


      <el-col :span="24">
        <div class="panel-group1">
          <div class="f_16 f_bold" style="margin-bottom: 36px;">我的结算</div>

          <div class="row space-between" style="margin-left: 75px;margin-right: 75px;">

            <div class="column_c ">
              <div class="f_18 mb_6">总金额</div>
              <div class="f_36 f_bold color_1A82FB mb_6">￥{{aggregate_amount}}</div>
              <div>
                <el-button type="primary" @click="dialogVisible = true">提现</el-button>
              </div>
            </div>

            <div>
              <el-divider direction="vertical"></el-divider>
            </div>

            <div class="column_c ">
              <div class="f_18 mb_6">下月结算</div>
              <div class="f_36 f_bold color_1A82FB">￥{{settlement_next_month}}</div>
            </div>


            <div>
              <el-divider direction="vertical"></el-divider>
            </div>


            <div class="column_c ">
              <div class="f_18 mb_6">可提现金额</div>
              <div class="f_36 f_bold color_1A82FB">￥{{wallet_balance}}</div>
            </div>

          </div>
        </div>

        <el-row>
          <el-col :span="24">
            <div class="panel-group2">
              <div class="f_16 f_bold" style="margin-bottom: 36px;">提现记录</div>
              <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" v-loading="loading">
                <el-table-column prop="bank_account" label="银行账号" align="center">
                </el-table-column>
                <el-table-column prop="money" label="提现金额" align="center">
                </el-table-column>
                <el-table-column prop="created_at" label="提现时间" align="center">
                </el-table-column>
                <el-table-column label="状态" align="center" prop="condition">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.settlement_state==1" class="ml-2" type="info">审核中</el-tag>
                    <el-tag v-if="scope.row.settlement_state==2" class="ml-2" type="danger">审核通过</el-tag>
                    <el-tag v-if="scope.row.settlement_state==3" class="ml-2" type="success">审核失败</el-tag>
                  </template>
                </el-table-column>
              </el-table>

              <div class="center mt_50">
                <div class="center ">
                  <pagination v-show="total>0" :total="total" :page.sync="queryParams.noPage" :limit.sync="queryParams.pageSize" @pagination="getList" />
                </div>
              </div>
            </div>
          </el-col>
        </el-row>


      </el-col>


    </el-row>


    <el-dialog title="" :visible.sync="dialogVisible" width="32%" style="margin-top: 200px ;" :show-close="true">
      <div class="row">
        <div class="f_15 f_bold mr_40">选择银行卡</div>
        <div class=" space-between center yhbox">
          <div>
            <img style="width: 20px;height: 20px;" src="@/assets/images/yy.png" />
          </div>
          <div class="column center">
            <div class="row center">
              <div class="row center">
                <!-- <img style="width: 40px;height: 40px;" src="@/assets/images/jhlogo.png" /> -->
                <!-- <img style="width: 40px;height: 40px;" src="@/assets/images/123.png" /> -->
                <img style="width: 40px;height: 40px;" :src="user_info.open_bank_log" />
              </div>
              <div class="column ml_10">
                <div class="f_16 " style="line-height: 16px;letter-spacing:11px;font-weight: 700;color: black;">{{user_info.open_bank}}</div>
                <div class="" style="width: 146px;line-height: 12px;margin-top: 5px;font-size: 8px;font-weight: 700;">
                  {{user_info.open_bank_e}}
                </div>
              </div>
            </div>
            <div class="f_bold mt_10" style="font-weight: 700;color: black;"> {{user_info.card_number | hideCardNumber }}</div>
          </div>
        </div>
      </div>

      <div class=" row   mt_30">
        <div class="f_16 f_bold center ">提现金额</div>
        <div style="margin-left: 60px;">
          <el-input v-model="form.money" style="height:50px"></el-input>
        </div>
      </div>

      <div class=" row   mt_30">
        <div class="f_16 f_bold center ">安全密码</div>
        <div style="margin-left: 60px;">
          <el-input v-model="form.password" show-password style="height:50px"></el-input>
        </div>
      </div>

      <div class="txxbutton">
        <el-button size="medium" class="mt_30 " style="margin-left: 116px;" type="primary" @click="submitForm">提现</el-button>
      </div>

      <div class="f_16 color_878787 mt_20" style="margin-left: 116px;">
        工作日18:00前提现当天到账，其他时间提现将于下一个工作日到账。
      </div>
    </el-dialog>



  </div>
</template>

<script>
  import CountTo from 'vue-count-to'
  import Cookies from 'js-cookie'
  import Vue from 'vue';

  import Navvz from "@/components/Navvz";
  import Sidebartss from "@/components/Sidebartss";
  import * as settlement from '@/api/system/settlement';
  import * as Work from "@/api/operation/work";

  export default {
    name: 'Index',
    components: {
      CountTo,
      Navvz,
      Sidebartss
    },
    data() {
      return {
        refreshKey: 0,
        wallet_balance: 0, //可提现金额
        settlement_next_month: 0, //下月结算金额
        aggregate_amount: 0, //总金额
        userId: 0,
        user_info: null,
        form: {
          money: null, //提现金额
          password: null, //安全密码
          bank_account: null, //银行账号
          user_id: null, //开发者id
          user_name: null, //开发者用户名
          phone: null, //开发者电话
          f_balance: null, //提现前余额
          q_balance: null, //提现后余额
        },
        loading: false,
        total: 0,
        // 查询参数
        queryParams: {
          noPage: 1,
          pageSize: 10,
          filter: {
            time: null,
          },
        },
        tableData: [],
        dialogVisible: false,
      }
    },
    filters: {
      hideCardNumber(cardNumber) {
        return cardNumber.replace(/^(\d{6})(\d+)(\d{4})$/, (_, prefix, hidden, suffix) =>
          prefix + hidden.replace(/\d/g, '*') + suffix
        );
      }
    },
    created() {
      this.userId = localStorage.getItem('user_id');
      this.wallet_balance = localStorage.getItem('wallet_balance'); //可提现金额

      var userJSON = localStorage.getItem('userInfo');
      this.user_info = JSON.parse(userJSON);
      console.log('user_info', this.user_info);

      this.getSettlementNextMonth(); //查询下月结算金额
      this.getList();
    },
    mounted() {

    },
    methods: {

      /** 查询列表 */
      getList() {
        this.queryParams.user_id = this.userId
        this.queryParams.type_pj = 1

        this.loading = true;
        settlement.getList(this.queryParams).then(response => {
          this.tableData = response.data.list;
          this.total = response.data.pagination.totalCount;
          this.loading = false;

        });
      },

      /** 提交按钮 */
      submitForm: function() {

        if (!this.form.money) {
          this.$modal.msgWarning("提现金额提现金额不能为空");
          return
        }

        if (!this.form.password) {
          this.$modal.msgWarning("安全密码安全密码");
          return
        }
        var q_balance = parseFloat(this.user_info.wallet_balance) - parseFloat(this.form.money) //提现后余额

        if (q_balance < 0) {
          this.$modal.msgWarning("提现金额不能大可提现金额");
          return
        }

        this.form.user_id = this.userId, //开发者id
          this.form.user_name = this.user_info.username, //开发者用户名
          this.form.phone = this.user_info.mobile, //开发者电话
          this.form.bank_account = this.user_info.card_number, //银行账号
          this.form.f_balance = this.user_info.wallet_balance, //提现前余额
          this.form.q_balance = q_balance, //提现后余额
          this.form.type_pj = 1
        this.loading = true;
        settlement.Add(this.form).then(response => {

          this.$modal.msgSuccess('新增成功');
          this.wallet_balance = q_balance;
          this.user_info.wallet_balance = q_balance;
          this.aggregate_amount = parseFloat(q_balance) + parseFloat(this.settlement_next_month);

          this.form.money = null;
          this.form.password = null;
          this.open = false;
          this.loading = false;
          this.dialogVisible = false;
          this.getList();
        });
      },


      /** 查询下月结算金额 */
      getSettlementNextMonth() {
        var per = {
          type_pj: 1,
          developer: this.userId,
        }
        this.loading = true;
        settlement.getSettlementNextMonth(per).then(response => {
          this.settlement_next_month = response.data.settlement_next_month;
          this.aggregate_amount = parseFloat(this.wallet_balance) + parseFloat(this.settlement_next_month);
          this.loading = false;
        });
      },

      tableRowClassName({
        row,
        rowIndex
      }) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
    }
  }
</script>

<style lang="scss" scoped>
  .pagss {
    height: 100%;
    background: #E4EEF9;
  }


  .panel-group1 {
    padding: 25px;
    margin-top: 18px;
    margin-bottom: 0px;
    margin-right: 15px;
    margin-left: 15px;
    min-height: 220px;
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  .panel-group2 {
    padding: 25px;
    margin-top: 18px;
    margin-bottom: 0px;
    margin-right: 15px;
    margin-left: 15px;
    min-height: 300px;
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  ::v-deep .el-divider--vertical {
    height: 100px;
  }

  ::v-deep .el-input__icon::after {

    margin-top: -8px;
  }

  .yhbox {
    padding: 20px;
    width: 320px;
    height: 120px;
    background: #FFFFFF;
    // background: red;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #BBBBBB;
  }

  ::v-deep .el-dialog__header {
    padding: 20px;
    padding-bottom: 0;
  }



  .txxbutton {
    ::v-deep .el-button--medium {
      width: 146px;
      height: 52px;
      padding: 10px 20px;
      font-size: 20px;
      border-radius: 4px;
    }
  }
</style>
